<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/jquery-layout/jquery.layout-latest.css}" rel="stylesheet"/>
<link th:href="@{/ajax/libs/layui/layui/css/layui.css}" rel="stylesheet"  media="all"/>
<link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"  media="all"/>

<body class="gray-bg">
	<div class="container-div ui-layout-center">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="user-form">
					<div class="select-list">
						<ul>
							<li>
								交付部：
								<select id="checkPdu"  name="checkPdu"  style="width: 100px" th:with="type=${@dict.getType('deliver_dept_type')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
								</select>
							</li>
							<li>
								PDU：
								<select id="pdu"  name="pdu"  style="width: 100px" th:with="type=${@dict.getType('human_pdu')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
								</select>
							</li>
							<li>
								地域：
								<select id="region"  name="region"  style="width: 100px" th:with="type=${@dict.getType('check_region')}">
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" ></option>
								</select>
							</li>

							<li class="select-time">
								<label>工时开始结束月份： </label>
								<input type="text" class="time-input" style="width: 130px" id="startEndMonth" placeholder="开始月份" name="params[beginTime]"/>
							</li>

							<li>
								<a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-success btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="ui-layout-center" style="padding:0 10px 0 10px">
				<div class="row" >
					<div class="col-sm-6" style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="weekendOver8" style="width:100%;height:270px;">
								周末加班超8小时Overtime over 8 hours on weekends
							</div>
						</div>
					</div>
					<div class="col-sm-6" style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id2" style="width:100%;height:270px;">
								月工时不足周末加班
							</div>
						</div>
					</div>

				</div>
				<div class="row">
					<div class="col-sm-6"  style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id3" style="width:100%;height:270px;">
								外出公干不合规
							</div>
						</div>
					</div>
					<div class="col-sm-6"  style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id4" style="width:100%;height:270px;">
								月度工时不足8小时
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6"  style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id5" style="width:100%;height:270px;">
								连续异常3天以上
							</div>
						</div>
					</div>
					<div class="col-sm-6"  style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id6" style="width:100%;height:270px;">
								疑似月末补工时
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6"  style="padding:10px 7px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id7" style="width:100%;height:270px;">
								周末加班不足8小时
							</div>
						</div>
					</div>
					<div class="col-sm-6"  style="padding:10px 7px 10px;">
						<div  style="padding:0 7px;background: #fff;padding: 15px 5px;border-radius: 10px;box-shadow: 1px 1px 3px rgba(0,0,0,.4);">
							<div id="id8" style="width:100%;height:270px;">
								周末加班工时异常处理
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div th:include="include :: footer"></div>
	<script th:src="@{/ajax/libs/jquery-layout/jquery.layout-latest.js}"></script>
	<script th:src="@{/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
	<script th:src="@{/ajax/libs/layui/layui/layui.js}"></script>
	<script th:src="@{/js/echarts.js}"></script>

	<script th:inline="javascript">
		var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
		var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
		var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
		var datas = [[${@dict.getType('sys_normal_disable')}]];
		var projects = [[${@dict.getType('sys_user_project_role')}]];
		var prefix = ctx + "worktime/board";

		createWeekendOver8Bar();
		function createWeekendOver8Bar(){
			var checkPduBar = echarts.init(document.getElementById('checkPduBar'));

			$.ajax({
				cache : true,
				type : "POST",
				<!--url : ctx +"worktime/board/list/weekendOver8Hours",-->
				url : ctx +"/list";
				async : false,
				error : function(request) {
					$.modal.alertError("系统错误");
				},
				success : function(recvData) {
					var data={
							text:"周末加班大于8小时",
							legnedData:recvData.less8Hours.legnedData,
							xAixsData:recvData.less8Hours.xAixsData,
							seriesData:recvData.less8Hours.seriesData
					};
						var option1 = {
							title: {
								text: '交付部',
								 subtext: '',
								left: 'center'
							},
							tooltip: {
								trigger: 'axis'
							},
							legend: {
								data:data.legnedData,
								top: 'bottom'
							},
							 grid: {
								left: '3%',
								right: '4%',
								bottom: '5%',
								containLabel: true
							},
							xAxis: {
								type: 'category',
								data:data.xAixsData,
								axisLabel : {
									interval:0,
									rotate:"30"
								}
							},
							yAxis: {
								 splitLine:{show: false},
								type: 'value'
							},
							series:data.seriesData
						};
						checkPduBar.setOption(option1,true);
						$(window).resize(function(){
							checkPduBar.resize();
						})
				}
				});
		}
 		var options = {
		        url: prefix + "/list",
		        createUrl: prefix + "/add",
		        updateUrl: prefix + "/edit/{id}",
		        removeUrl: prefix + "/remove",
		        sortName: "createTime",
		        sortOrder: "desc",
		        modalName: "工时异常看板",
		        search: false,
		        showExport: false,
		        showColumns: false,
		        showRefresh: false,
		        showToggle: false,
		        showHeader: false,
		        showFooter: false,
		        searchable: false,
		        smartDisplay:false,
		        showSearch:false,
		        columns: [
		        {
		            field: 'hwCode',
		            title: '华为工号'
		        },
		        {
		            field: 'name',
		            title: '姓名'
		        },
		        {
		            field: 'checkDate',
		            title: '加班日期'
		        },
		        {
		            field: 'extraHours',
		            title: '加班小时'
		        },
		        {
		            title: '操作',
		            align: 'center',
		            width:"300",
		            formatter: function(value, row, index) {
		                var actions = [];
		                actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
		                actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a> ');
		                actions.push('<a class="btn btn-info btn-xs ' + resetPwdFlag + '" href="#" onclick="resetPwd(\'' + row.userId + '\')"><i class="fa fa-key"></i>重置</a>');
		                return actions.join('');
		            }
		        }]
		    };
		 $('#bootstrap-table').bootstrapTable('refresh',options);

		//年月范围
		layui.use('laydate', function(){
		var laydate = layui.laydate;
		  laydate.render({
			elem: '#startEndMonth'
			,type: 'month'
			,range: true
			,max: maxDate()
			,done: function(value, date) {
				var months = value.split(" - ");
			}
		  });
		 });
		// 设置最大可选的日期
		function maxDate() {
			var now = new Date();
			return now.getFullYear() + "-" + (now.getMonth() + 1);
		}
		$(function() {
			$('body').layout({ west__size: 185 });
			queryWorktimeList();
			//queryInitOption();
		});


		function queryWorktimeList() {

			$.table.init(options);

		}
		function queryInitOption(){
			$.ajax({
				cache : true,
				type : "POST",
				url : ctx+"worktime/board/init",
				data : {
					"roleId": 1
				},
				async : false,
				error : function(request) {
					$.modal.alertError("系统错误");
				},
				success : function(datas) {
					alert(datas.pdu);
					var actions = [];
                	$.each(datas.pdu, function(index, dict) {
                		actions.push("<option value="+dict+">"+dict+"</option>");
                    });
               		actions.join('');
               		$("#pdu").append(actions);
				}
			});
		}

		function edit() {
			var roleId = $("input[name='roleId']").val();
			var roleName = $("input[name='roleName']").val();
			var roleKey = $("input[name='roleKey']").val();
			var roleSort = $("input[name='roleSort']").val();
			var status = $("input[name='status']").is(':checked') == true ? 0 : 1;
			var remark = $("input[name='remark']").val();
			var menuIds = $.tree.getCheckedNodes();
			$.ajax({
				cache : true,
				type : "POST",
				url : ctx + "system/role/edit",
				data : {
					"roleId": roleId,
					"roleName": roleName,
					"roleKey": roleKey,
					"roleSort": roleSort,
					"status": status,
					"remark": remark,
					"menuIds": menuIds
				},
				async : false,
				error : function(request) {
					$.modal.alertError("系统错误");
				},
				success : function(data) {
					$.operate.saveSuccess(data);
				}
			});
		}


	</script>
</body>
</html>